<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

    <title>在线申请</title>

    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>

    <link rel="stylesheet" href="/css/applyList.css"/>

    <style>
        #icon_add_apply {
            width: 24px;
            height: 24px;
            margin-right: 10px;
            display: inline-block;
            vertical-align: middle;
            background: transparent url("/images/icon_apply_white.png") no-repeat;
            background-size: 100%;
        }
        .item_card{
            margin: 10px 17px 0;
            box-shadow: 0 1px 2px 1px rgba(51,51,51,0.1),1px 3px 4px 2px rgba(51,51,51,0.07);
            border-radius: 6px;
        }

        .apply_title{background-color: #1876ce;border-radius: 6px 6px 0 0;padding: 5px 15px 5px 25px;display: flex;}

        .apply_apply_realname{color:#ffffff;flex:10 ;font-size: 14px;overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;}
        .apply_apply_applyno{color:#d0d0d0;flex:20;font-size: 14px;}
        .apply_apply_tips{color:#d0d0d0;flex:3;font-size: 14px;margin: -2px 0 -10px;}
        .apply_content{min-height: 20px;padding: 8px 0 2px;}

        .apply_summary{padding: 5px 25px;display: flex;}
        .apply_summary_title{flex: 4;}
        .apply_summary_info{flex: 5; color: #c0c0c0;}

        .apply_operation{min-height: 20px;margin: 5px 20px;border-top: 2px solid rgba(192,192,192,0.5);display: flex;font-size: 16px;color: #1876ce;}

        .apply_operation_button_left{flex: 1;margin: 10px 0;border-right: 2px solid rgba(192,192,192,0.5);justify-content: center;display: flex;align-items: center;color: #1876ce;}
        .apply_operation_button_right{flex: 1;margin: 10px 0;justify-content: center;display: flex;align-items: center;color: #1876ce}
        .icon_view_blue{background:transparent url("/images/icon_view_blue.png") no-repeat;height: 20px;width: 20px;margin-right: 5px; background-size: 100%;align-items: center;}
        .icon_calendar_blue{background:transparent url("/images/icon_calendar_blue.png") no-repeat;height: 20px;width: 20px; margin-right: 5px;background-size: 100%; align-items: center;}

    </style>

</head>
<body>
<div class="page" id="app">
    <a href="/apply/page/add" class="weui-btn weui-btn_primary" style="background-color: #1876ce;margin: 10px 16px;"><i
            id="icon_add_apply"></i>填写新申请</a>
    <div class="item_card" v-for="apply in applyList" >
        <div class="apply_title">
            <div class="apply_apply_realname">{{apply.realName}}</div>
            <div class="apply_apply_applyno">申请号:{{apply.applyNo}}</div>
            <div class="apply_apply_tips">
                <a :href="viewTips(apply.applyId)" style="height: 100%;" v-if="apply.hasRemind">
                    <img src="/images/tips.png" style="height: 6.6vw;"/>
                </a>
            </div>
        </div>
        <div class="apply_content">
            <div class="apply_summary" v-for="s in apply.summary">
                <div class="apply_summary_title">{{s.title}}</div>
                <div class="apply_summary_info">{{s.info}}</div>
            </div>

        </div>
        <div class="apply_operation">
            <a v-if="apply.appointmentId==0" v-bind:href="addAppointment(apply.applyId)" class="apply_operation_button_left">
                <i class="icon_calendar_blue"></i>
                添加预约
            </a>
            <a v-if="apply.appointmentId!=0" v-bind:href="viewAppointment(apply.appointmentId)" class="apply_operation_button_left">
                <i class="icon_calendar_blue"></i>
                查看预约
            </a>
            <a  v-bind:href="viewApply(apply.applyId)" class="apply_operation_button_right">
                <i class="icon_view_blue"></i>
                查看申请
            </a>

        </div>

    </div>
    <div v-bind:class="['weui-loadmore','weui-loadmore_line',{'hidden_div':loadMoreDisplay}]">
        <span class="weui-loadmore__tips">暂无数据</span>
    </div>

</div>

<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>

</div>
<script>
    var app = new Vue({
        el: "#app",
        data: {
            applyList: [],
            monthArray:[]
        },
        created: function () {
            var that = this;

            $.post("/apply/list",{},function (result) {
                that.applyList = result;
            });
        },
        methods:{
            addAppointment:function (val) {
                return "/appointment/add/page?applyId="+val;
            },
            viewAppointment:function (val) {
                return "/appointment/view/page?appointmentId="+val;
            },
            viewApply:function (val) {
                return "/apply/view/page?applyId="+val;
            },
            viewTips:function (val) {
                return "/apply/tips/page?applyId="+val;
            }

        },computed:{
            loadMoreDisplay:function () {
                return this.applyList.length!=0;
            }
        }
    });

</script>

</body>
</html>